<template>
    <div class="fillcontain">
        <head-top></head-top>
        <div class="table_container">

            <span style="bottom: 10px" v-if="searchSelect==0||searchSelect==null">产品评论</span>
            <span style="bottom: 10px" v-else-if="searchSelect==1">设备评论</span>
            <div style="margin-top: 15px;margin-bottom: 20px;width: 90%" >
                <el-input placeholder="请输入用户电话" v-model="searchText" class="input-with-select">
                    <el-select v-model="searchSelect" slot="prepend" placeholder="请选择">
                        <el-option label="产品" value="0"></el-option>
                        <el-option label="设备" value="1"></el-option>
                    </el-select>

                    <el-button slot="append" type="primary" class="el-icon-search" @click="searchBySelect">搜索</el-button>
                </el-input>
            </div>
            <div style="border: #e64242 2px solid;float: left">

            <div v-for="(item,index) in projectList" style="float:left">
                <el-button v-if="buttonStyle!=item.productId&&searchSelect==0" type="primary" style="margin: 0px auto;left: 0px;right: 0px;top: 0px;bottom: 0px;border: 20px solid" @click="searchClassify(item.productId)">{{item.productName}}</el-button>
                <el-button v-else-if="buttonStyle==item.productId" type="success" style="margin: 0px auto;left: 0px;right: 0px;top: 0px;bottom: 0px;border: 20px solid" @click="searchClassify(item.productId)">{{item.productName}}</el-button>
                <el-button v-else-if="buttonStyle==item.equipId" type="success" style="margin: 0px auto;left: 0px;right: 0px;top: 0px;bottom: 0px;border: 20px solid" @click="searchClassify(item.equipId)">{{item.equipName}}</el-button>
                <el-button v-else-if="searchSelect==1&&buttonStyle!=item.equipId" type="warning" style="margin: 0px auto;left: 0px;right: 0px;top: 0px;bottom: 0px;border: 20px solid" @click="searchClassify(item.equipId)">{{item.equipName}}</el-button>
            </div>
            </div>

            <el-table v-if=""
                      :data="tableData"
                      highlight-current-row
                      style="width: 100%;margin: 0px auto">


                <el-table-column
                    label="评论编号"
                    width="220">
                    <template slot-scope="scope">

                        <i class="el-icon-shopping-cart-2"></i>
                        <span style="margin-left: 10px">{{ scope.row.evaluationId}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="订单编号"
                    width="220">
                    <template slot-scope="scope">

                        <i class="el-icon-shopping-cart-2"></i>
                        <span style="margin-left: 10px">{{ scope.row.evaluationOrderId}}</span>
                    </template>
                </el-table-column>

                <el-table-column
                    label="手机号"
                    width="180">
                    <template slot-scope="scope">
                        <i class="el-icon-mobile"></i>
                        <span style="margin-left: 10px">{{ scope.row.evaluationUserId}}</span>
                    </template>
                </el-table-column>

                <el-table-column
                    label="评论等级"
                    width="210">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.evaluationLevel}}</span>
                    </template>
                </el-table-column>

                <el-table-column
                    label="评论内容"
                    width="180">
                    <template slot-scope="scope">
                        <i class="el-icon-s-data"></i>
                        <span style="margin-left: 10px">{{ scope.row.evaluationCommentary}}</span>
                    </template>
                </el-table-column>

                <el-table-column
                    label="评论时间"
                    width="180">
                    <template slot-scope="scope">
                        <i class="el-icon-s-data"></i>
                        <span style="margin-left: 10px">{{scope.row.createdTime|dateFmt('YYYY-MM-DD')}} </span>
                    </template>
                </el-table-column>

                <el-table-column label="操作" fixed="right" width="100">
                    <template slot-scope="scope">
                        <el-button type="danger" size="mini"
                                   @click="deleteEvalution(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>


            </el-table>


            <div class="pagination">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 20, 40]"
                    :page-size="pageSize"
                    layout="total, sizes,prev, pager, next"
                    :total="tableLen"
                    prev-text="上一页"
                    next-text="下一页">
                </el-pagination>
            </div>




        </div>

    </div>
</template>

<script>
    var that;
    import headTop from '../components/headTop'
    import {baseUrl, baseImgPath} from '@/config/env'
    import {getusers, getEquipsCount, getMenu, updateuser, deleteEquip, getResturantDetail, getMenuById} from '@/api/getData'
    export default {
        data(){
            return {
                ifSearch: false,
                orderVo:{
                    category: "",
                    productId: "",
                    userphone: ""
                },
                currentPage:0,
                pageSize: 5,
                tableLen: 0,
                buttonStyle: "",


                StatusVo: {
                    classify: 0,
                    selectPhone: ""

                },
                projectList: [],
                searchText: "",
                searchSelect: null,
                tableData: [],
                tableData2: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }]

            }
        },
        mounted(){
            this.showAllProject()


        },

        created(){

        },
        beforeCreate() {
          that = this;
        },
        computed: {

        },
        components: {
            headTop,
        },
        filters: {



        },
        watch: {
            buttonStyle: {
                handler(newName,oldName){
                    that.searchBySelect()
                    that.ifSearch = true



                }
            },

            searchSelect: {
                handler(newName,oldName){
                    if(newName==0)
                    {
                        that.showAllProject();
                        that.ifSearch = true


                    }
                    else if(newName == 1){

                        that.showAllEquipment();
                        that.ifSearch = true

                    }



                }
            },



        },

        methods: {
            deleteEvalution: function(index,row){

                var that = this
                this.$axios.delete(this.$host2+"/zk/evaluation/"+row.evaluationId,{
                    headers: {
                        "Authorization": localStorage.getItem('token')

                    }
                }).then(
                    res=>{
                        if(res.data.code==200){

                            that.$message.success("删除成功")
                            that.searchBySelect()
                        }

                    }
                ).catch(
                    error=>{
                        that.$message.error("删除失败")
                    });


            },
            getGoodList: function (){
                //
                // var that = this
                // this.$axios.get(this.$host2+"/zk/orderPy/?current="+that.currentPage+"&size="+that.pageSize,{
                //     headers: {
                //         "Authorization": localStorage.getItem('token')
                //
                //     }
                // }).then(
                //     res=>{
                //         that.tableData = res.data.data.ipage.records;
                //         that.tableLen = res.data.data.total;
                //         this.tableData.sort(this.compare('status'))
                //         console.log(that.tableData+"==="+typeof that.tableData)
                //
                //     }
                // ).catch(error=>console.log(error));
            },
            handleSizeChange: function(size) {
                this.pageSize = size;
                    this.searchBySelect();
                /*console.log(this.pagesize) */
            },
            searchBySelect: function(){
                if(this.ifSearch) {
                    this.currentPage = 1;
                    this.pageSize = 5;
                }
                if(this.searchSelect!=null||this.searchText!=null) {
                    this.orderVo.category = this.searchSelect;
                    this.orderVo.userphone = this.searchText;
                }
                if(this.radio1!=null||this.radio1!="")

                {

                }
                else if(this.searchSelect==null||this.searchSelect==""||this.pageSize==null||this.pageSize=="")
                {
                    this.$message.error("请填写目标信息后再查找");

                }
                var that = this
                this.$axios.get(this.$host2+"/zk/evaluation/category/?current="+that.currentPage+"&size="+that.pageSize+"&category="+this.orderVo.category+"&productId="+this.orderVo.productId+"&userphone="+this.orderVo.userphone,{
                    headers: {
                        "Authorization": localStorage.getItem('token')

                    }
                }).then(
                    res=>{
                        if (res.data.data.records.length>0) {
                            that.tableData = res.data.data.records;

                            this.tableLen = res.data.data.total-0;
                            that.$message.success("查询成功")

                        }
                        else{
                            that.tableData = [];
                            that.$message.error("没有评论")

                        }

                    }
                ).catch(
                    error=>{
                    that.tableData = [];
                that.$message.error("没有评论")
                    });




            },

            //点击第几页
            handleCurrentChange: function(currentPage) {
                this.currentPage = currentPage;
                 this.searchBySelect();
                /*console.log(this.currentPage) */
            },
            searchClassify(searchId){
                if(this.buttonStyle==searchId)
                {
                    this.buttonStyle = ""

                }
                else {
                    this.buttonStyle = searchId
                }
                this.orderVo.productId = this.buttonStyle


            },

            showAllEquipment(){
                var that = this;
                this.$axios.get(this.$host+"/zk/all-equipment/", {
                    headers: {
                        //把令牌发过去
                        "Authorization": localStorage.getItem('token')
                    }
                })
                    .then(function(res) {

                        that.projectList = res.data;
                    })
                    .catch(err => {
                        console.log(err);
                    })
            },
            showAllProject() {
                var that = this;
                this.$axios.get(this.$host+'/zk/all-products/', {
                    headers: {
                        //把令牌发过去
                        "Authorization": localStorage.getItem('token')
                    }
                })
                    .then(function(res) {
                        console.log(res)
                        that.projectList = res.data.data;
                    })
                    .catch(err => {
                        console.log(err);

                    })
            },

            changeClassify(value){




            }

        },
    }
</script>

<style lang="less">
    @import '../style/mixin';
    .table_container{
        padding: 20px;
    }
    .el-select .el-input {
        width: 130px;
    }
    .input-with-select .el-input-group__prepend {
        background-color: #fff;
    }
</style>
